<template>
    <div class="add_radio_container">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>产品</el-breadcrumb-item>
            <el-breadcrumb-item>乐趣电台管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加乐趣电台</el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="add_radio_card">

            <!-- title -->
            <el-row class="title">
                <el-col>
                    <span class="text">添加乐趣音频</span>
                </el-col>
            </el-row>

            <!-- 主体内容 -->
            <div class="content">
                <el-form class="add_radio_form" :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
                    <el-form-item label="音频名称:" prop="name">
                        <el-input class="width380" v-model="ruleForm.name" placeholder="请输入轮播图的名称"></el-input>
                    </el-form-item>

                    <el-form-item class="el-form-item_2" label="图片:">
                        <el-upload action="http://up-z2.qiniup.com" :file-list="imgList" list-type="picture-card" :on-preview="descPictureCardPreview" :on-remove="descRemove" :on-success="descAvatarSuccess" :on-error="descError" :on-exceed="descExceed" :data="postData">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <!--<p class="disc">图片尺寸750 X 900</p>-->
                        <el-dialog :visible.sync="desc_img">
                            <img width="100%" :src="descImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>

                    <el-form-item label="期数:" prop="stage_id">
                        <el-select style="width: 380px;" size="medium" v-model="ruleForm.stage_id" placeholder="请选择期数">
                            <el-option v-for="item in stageList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="音频:" prop="audio">
                        <el-upload style="width: 400px;" class="upload-demo" action="http://up-z2.qiniup.com" :on-preview="preview_video" :on-remove="remove_audio" :before-upload='beforeUpload' :before-remove="before_remove_video" :on-success="upload_video_success" :limit="1" :show-file-list="false" :on-exceed="handle_exceed_video" :data="postData" v-if="is_upload_video === false">
                            <el-button size="small" type="primary" v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="上传中,请稍候">点击上传
                            </el-button>
                        </el-upload>
                        <el-button size="small" type="primary" @click="remove_audio" v-if="is_upload_video">移除音频
                        </el-button>
                        <div style="padding-top: 10px;" v-if="is_upload_video">
                            <el-row>
                                <el-col :span="0.5">
                                    <el-popover placement="top-start" trigger="hover">
                                        <div style="text-align: center">
                                            <el-progress color="#67C23A" type="circle" :percentage="music.volume"></el-progress>
                                            <br>
                                            <el-button @click="changeVolume(-10)" icon="el-icon-minus" circle></el-button>
                                            <el-button @click="changeVolume(10)" icon="el-icon-plus" circle></el-button>
                                        </div>
                                        <el-button @click="play" id="play" slot="reference" :icon="music.isPlay?'el-icon-loading':'el-icon-caret-right'" circle></el-button>
                                    </el-popover>
                                </el-col>
                                <el-col :span="2" style="padding-left: 15px;">
                                    <el-slider @change="changeTime" :format-tooltip="formatTime" :max="music.maxTime" v-model="music.currentTime" style="width: 100%;"></el-slider>
                                </el-col>
                                <el-col :span="6" style="padding: 0px 0px 0px 10px;color:#909399;font-size: 13px">
                                    {{formatTime(music.currentTime)}}/{{formatTime(music.maxTime)}}
                                </el-col>
                            </el-row>
                            <audio ref="music" loop autoplay>
                                <source :src="ruleForm.audio" type="audio/mpeg">
                            </audio>
                        </div>
                    </el-form-item>

                    <el-form-item label="设置时间:">
                        <el-date-picker size="medium" style="width: 300px;" v-model="date" type="daterange" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="作者:" prop="author">
                        <el-input class="w300" placeholder="请输入作者姓名" v-model="ruleForm.author"></el-input>
                    </el-form-item>
                    <el-form-item label="音频介绍:">
                        <el-input type="textarea" rows="6" class="big_box" v-model="ruleForm.content" placeholder="请输入音频介绍"></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('ruleForm')">保存</el-button>
                        <el-button @click="cancel()">返回</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>

<script src='../../../static/js/radio/add_radio.js'></script>

<style scoped>
@import "../../../static/css/radio/add_radio.css";
</style>

